<template>
  <div>
    <div class="title-map animate__animated animate__fadeIn">
      <el-carousel :interval="3000" arrow="hover" height="450px">
        <el-carousel-item v-for="item in imgList" :key="item">
          <el-image fit="cover" :src="item.url" :alt="item.url"></el-image>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="other-one-ending animate__animated animate__fadeInUp">
      <h2>what are you waiting for</h2> 
    </div>
    <a href="/newView">跳转...</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgList: [
        { url: require("../../assets/wallhaven-72pgxv.png") },
        { url: require("../../assets/wallhaven-39xklv.jpg") },
        { url: require("../../assets/wallhaven-42ro5m.jpg") },
        { url: require("../../assets/wallhaven-721dmy.jpg") },
      ],
    };
  },
  methods: {},
};
</script>

<style scoped lang="less">
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.other-one-ending{
  margin-top: 40px;
  h2{
    text-align: center;
  }
}
</style>